<template>
	<view>
		<!-- 加载 -->
		<view class="topic_list margin-20">
			<view class="topic_item" >
				<view class="ToppTitel">
					消费者购车目的调查问卷
				</view>
				<view class="ToppText">
					这里是问卷说明
				</view>
		
				
		
			</view>
		</view>
		<!-- 题目 -->
		<view class="topic">
			<view class="topic_list margin-20">
				<view class="topic_item" v-for="(item,index) in test_question_arr" :key="index">

					<view class="title">
						{{Number(index)+1}}.{{item.question}}

					</view>
					<view class="text">
						({{item.type_name}} <text v-if="is_score==0">{{item.score}}分</text> )
					</view>
					<radio-group @change="radioChange($event,item)" v-if="(item.type=='1')||(item.type=='3')">
						<label class="uni-list-cell" v-for="(items,indexs) in item.option" :key="items.number">
							<view>

								<radio :disabled="details==1" :checked="details==1&&items.number==item.answer"
									color='#00C749' style="transform:scale(0.7);" :value="items.number" />
							</view>
							<view class="title">
								{{item.type=='1'?((indexs+10).toString(36)).toUpperCase()+'.':''}}{{items.option}}
							</view>
						</label>
					</radio-group>
					<checkbox-group @change="radioChange($event,item)" v-if="(item.type=='2')">
						<label class="uni-list-cell" v-for="(items,indexs) in item.option" :key="items.number">
							<view>

								<checkbox :disabled="details==1"
									:checked="details==1&&item.answer.indexOf(items.number)!=-1" color='#00C749'
									style="transform:scale(0.7);" :value="items.number" />
							</view>
							<view class="title">{{((indexs+10).toString(36)).toUpperCase()}}.{{items.option}}</view>
						</label>
					</checkbox-group>
					<view v-if="(item.type=='4')">
						<label class="uni-list-cell" v-for="(items,indexs) in item.answer" :key="indexs">
							<input type="text" :disabled="details==1" :value="items" @blur="type4($event,item,indexs)"
								class="input">
						</label>
					</view>
					<view v-if="(item.type=='5')">
						<label class="uni-list-cell" v-for="(items,indexs) in item.answer" :key="indexs">
							<textarea :auto-height='true' type="text" :disabled="details==1" :value="items"
							 @blur="type4($event,item,indexs)"
								class="textarea">
								</textarea>
						</label>
					</view>

				</view>
			</view>
		</view>

	
		<view class="pop_bot" @tap="Freeappointment">
			提交
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				loin_info: {},
				test_question_id: '', //考试id
				test_question_arr: [
				], //题目
				loading: true,
				details: false,
				exam_id: '', //考试详情id
				save_bot: true,
				usrinfo: {}, //用户系统
				is_watermarking: 0, //水印
				is_score: 0,

			}
		},
		onLoad(e) {
			
	
				uni.enableAlertBeforeUnload({
					message: '确定提交试卷！',
					success: (res) => {
						console.log(res)
						// this.Freeappointment()
					},
					fail: (res) => {
						console.log('ws', res)
					}

				})
			
		},
		onShow() {
			this.getloin_info();

		},
		onUnload() {

		

		},
		methods: {
		
			radioChange(evt, item) {
				item.answer = evt.detail.value;
			},
			type4(evt, item, indexs) {
				item.answer[indexs] = evt.detail.value;
			},

			Freeappointment() {
				this.save_bot = false;

				var test_question_arr = JSON.parse(JSON.stringify(this.test_question_arr))
				var answer_json = {
					test_question_id: this.test_question_id,
					answer: []

				};
			
				for (let i in test_question_arr) {
					// if (test_question_arr[i].type == 2) {
					var json = {
						title_id: test_question_arr[i].title_id,
						answer: test_question_arr[i].answer == undefined ? '' : test_question_arr[i].answer.toString()
					};
					answer_json.answer.push(json)
				}
					console.log(answer_json)

				

			},
		
			getloin_info() {

				// getHt_online_exam({
				// 	test_question_id: this.test_question_id //考试id
				// }).then((res) => {
				// 	if (res.code == 200) {
						this.loin_info.exam_title_list = [{
						answer_count: 1,
						option: [{
							number: "A",
							option: "1"
						} ,{
							number: "B",
							option: "2"
						} ,{
							number: "C",
							option: "3"
						} ,{
							number: "D",
							option: "4"
						}],
						question: "选2",
						score: "2.50",
						title_id: 111,
						type: 1,
						type_name: "单选题",
					},
					{
						answer_count: 2,
						option: [{
							number: "A",
							option: "1"
						}, {
							number: "B",
							option: "2"
						}, {
							number: "C",
							option: "3"
						}],
						question: "13",
						score: "2.50",
						title_id: 112,
						type: 2,
						type_name: "多选题",
					},
					
					{
						answer_count: 1,
						option: null,
						question: "乱序456",
						score: 4.5,
						title_id: 114,
						type: 4,
						type_name: "填空题",
					},
					{
						answer_count: 1,
						option: null,
						question: "乱序456",
						score: 4.5,
						title_id: 114,
						type: 5,
						type_name: "填空题",
					},
					];
					
						// 处理数据
						for (let i in this.loin_info.exam_title_list) {
							var arr = [];
							if (this.loin_info.exam_title_list[i].type == 4||this.loin_info.exam_title_list[i].type == 5) {
								for (let j = 0; j < this.loin_info.exam_title_list[i].answer_count; j++) {
									arr.push('')
								}
							}
							if (this.loin_info.exam_title_list[i].type == 2) {
								arr = this.loin_info.exam_title_list[i].answer
							}
							var type_3 = [{
									number: '1',
									option: '正确',

								},
								{
									number: '2',
									option: '错误',

								},
							]
							var json = {
								title_id: this.loin_info.exam_title_list[i].title_id, //题目id
								type: this.loin_info.exam_title_list[i].type, //类型1单选题2多选题3判断题4填空题
								type_name: this.loin_info.exam_title_list[i].type_name, //类型名称
								question: this.loin_info.exam_title_list[i].question, //题目
								score: this.loin_info.exam_title_list[i].score, //分数
								answer_count: this.loin_info.exam_title_list[i].answer_count, //答案个数
								option: this.loin_info.exam_title_list[i].type != 3 ? this.loin_info
									.exam_title_list[i].option : type_3, //选项
								answer: arr
							}
							this.test_question_arr.push(json)
						}
					

				// 	} else {
				// 		uni.showToast({
				// 			title: res.msg,
				// 			icon: 'error',
				// 			success() {

				// 			}
				// 		})
				// 	}
				// })

			},
			
		}
	}
</script>

<style lang="less">
	page {
		background-color: #EFF2F3;
		padding-bottom: 100rpx;
	}

	.topic_list {
		.topic_item {
			opacity: 1;
			border-radius: 10px;
			background: rgba(255, 255, 255, 1);
			margin-top: 20rpx;
			padding: 20rpx;
			.ToppTitel{
				font-size: 36rpx;
				font-weight: bold;
				letter-spacing: 0px;
				line-height: 26.06px;
				color: rgba(212, 48, 48, 1);
				text-align: center;
				vertical-align: top;
			}
			.ToppText{
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 17.38px;
				color: rgba(153, 153, 153, 1);
				text-align: center;
				vertical-align: top;
				padding-top: 20rpx;
			}

			.title {
				font-size: 14px;
				color: rgba(51, 51, 51, 1);
			}

			.text {
				padding: 5px;
				font-size: 12px;
				color: rgba(153, 153, 153, 1);
			}

			.uni-list-cell {
				display: flex;
				align-items: center;
				padding: 10rpx;
			}

			.number {
				font-size: 28rpx;
				color: #999999;
				width: 40rpx;
				height: 40rpx;
				border: 2rpx solid #eee;
				border-radius: 50%;
				text-align: center;
				line-height: 40rpx;

			}

			.input {
				border: 1px solid #eee;
				font-size: 28rpx;
				padding: 10rpx;
				width: 100%;
				border-radius: 10rpx;
			}
			.textarea{
				border: 1px solid #eee;
				font-size: 28rpx;
				padding: 10rpx;
				width: 100%;
				border-radius: 10rpx;
				min-height: 150rpx;
			}

		}

	}

	.yes {
		min-height: 40rpx;

		border-radius: 10rpx;
		padding: 10rpx;
		font-size: 22rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.icon_yes {
			font-size: 70rpx;
			position: absolute;
			right: 30px;
		}

		.icon_yes_score {
			font-size: 28rpx;
			position: absolute;
			right: 30px;
		}

		.red {
			color: red;

		}

		.green {
			color: green;
		}
	}

	.yesbg {
		background-color: #f4f4f4;
	}

	.pop_bot {
		background: rgba(212, 48, 48, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		margin: 50rpx 50rpx;
		padding: 20rpx 0;
		text-align: center;
		text-align: center;
		border-radius: 50rpx;

	}
</style>